<template>
	<view class="petinfor">
		<view class="box1" @click="back">
			<uv-icon name="arrow-left" color="#fff"></uv-icon>
			<view class="box11">添加宠物</view>
		</view>
		<view class="addpets-form">
			<view class="form">
				<uv-form labelPosition="left" :model="model1" :rules="rules" ref="form">
					<uv-form-item borderBottom prop="userInfo.name">
						宠物名字
						<uv-input border="none" v-model="model1.userInfo.name" :placeholder="PetList.name" inputAlign="right">
						</uv-input>
					</uv-form-item>
					<uv-form-item borderBottom prop="userInfo.lei">
						类型<uv-input v-model="model1.userInfo.lei" :placeholder="PetList.type" border="none" @click="on"
							suffixIcon="arrow-down" suffixIconStyle="color: #909399" inputAlign="right"></uv-input>
						<uv-picker ref="pic" :columns="actions" @confirm="conm"></uv-picker>
					</uv-form-item>
					<uv-form-item borderBottom prop="userInfo.age">
						年龄
						<uv-input border="none" v-model="model1.userInfo.age" :placeholder="PetList.age" inputAlign="right">
						</uv-input>
					</uv-form-item>
					<uv-form-item borderBottom prop="userInfo.sex">
						性别<uv-input :placeholder="PetList.sex" border="none" v-model="model1.userInfo.sex" @click="openPicker"
							suffixIcon="arrow-down" suffixIconStyle="color: #909399" inputAlign="right"></uv-input>
						<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
					</uv-form-item>
					<uv-form-item borderBottom prop="userInfo.ti">
						体型<uv-input :placeholder="PetList.shape" border="none" v-model="model1.userInfo.ti" @click="openPickerr"
							suffixIcon="arrow-down" suffixIconStyle="color: #909399" inputAlign="right"></uv-input>
						<uv-picker ref="pickerr" :columns="ti" @confirm="confirmm"></uv-picker>
					</uv-form-item>
					<uv-form-item> 主人描述 </uv-form-item>
					<uv-form-item borderBottom>
						<uv-textarea customStyle="background-color: #f7f8fa;" v-model="description"
							:placeholder="PetList.description"></uv-textarea>
					</uv-form-item>
					<uv-form-item> 备注信息 </uv-form-item>
					<uv-form-item borderBottom>
						<uv-textarea customStyle="background-color: #f7f8fa;" v-model="remark "
							:placeholder="PetList.remark"></uv-textarea>
					</uv-form-item>
					<uv-form-item> 宠物图片 </uv-form-item>
					<uv-form-item borderBottom>
						<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" width="80px" height="80px" radius="10"></uv-image>
					</uv-form-item>
					<uv-form-item>
						<uv-button type="primary" @click="OpenPopup" text="查看修改信息显示" :custom-style="customStyle"></uv-button>
					</uv-form-item>
					<uv-form-item>
						<uv-button type="primary" text="删除" size="large" shape="circle" :custom-style="customStyle"
							@click="reset"></uv-button>
						<uv-button type="primary" text="保存" shape="circle" :custom-style="customStyle2"
							@click="ModificationInformation"></uv-button>
					</uv-form-item>

				</uv-form>
			</view>
		</view>
		<!-- 弹出层 -->
		<uv-popup ref="popup" bgColor="none" :closeable="true">
			<view class="tanchu" style="width: 600rpx;background-color: #fff; padding: 20rpx;border-radius: 20rpx;">
				宠物修改信息显示
				<uv-cell-group>
					<uv-cell title="宠物名字" :value="newlist.name"></uv-cell>
					<uv-cell title="宠物类型" :value="newlist.type"></uv-cell>
					<uv-cell title="宠物年龄" :value="newlist.age"></uv-cell>
					<uv-cell title="宠物性别" :value="newlist.sex"></uv-cell>
					<uv-cell title="宠物体形" :value="newlist.shape"></uv-cell>
					<uv-cell title="宠物描述" :value="newlist.description"></uv-cell>
					<uv-cell title="宠物备注" :value="newlist.remark"></uv-cell>
				</uv-cell-group>
			</view>
		</uv-popup>
	</view>


</template>

<script>
	import {
		myRequest
	} from '@/request/request.js'
	export default {
		data() {
			return {
				// 显示修改宠物列表
				newlist: '',
				// 商品id
				id: '',
				// 宠物具体信息列表
				PetList: '',
				tixing: "选择体型",
				lei: "选择类型",
				sex: "选择性别",
				ti: [
					["小型", "中型", "大型", "超大型"]
				],
				columns: [
					["男", "女"]
				],
				actions: [
					["狗狗", "喵喵", "丫丫"]
				],
				fileList1: [],
				// 主人描述
				description: "",
				// 备注信息
				remark: '',
				model1: {
					userInfo: {
						name: "",
						lei: "",
						age: "",
						ti: "",
						sex: "",
					},
				},

				rules: {
					"userInfo.name": {
						type: "string",
						required: true,
						message: "请填写姓名",
						trigger: ["blur", "change"],
					},
					sex: {
						type: "string",
						required: true,
						message: "请选择性别",
						trigger: ["blur", "change"],
					},
					"userInfo.age": {
						type: "string",
						required: true,
						message: "请填写年龄",
						trigger: ["blur", "change"],
					},
					"userInfo.ti": {
						type: "string",
						required: true,
						message: "请选择体型",
						trigger: ["blur", "change"],
					},
					'userInfo.lei': {
						type: "string",
						required: true,
						message: "请选择类型",
						trigger: ["blur", "change"],
					},
				},
				radio: "",
				switchVal: false,
			};
		},
		onLoad(e) {
			this.id = e.id
			// 用户宠物具体信息查询
			console.log("查询e", e);
			const id = this.id
			console.log('查询id', id);
			const that = this
			myRequest('pet/list?server=11', function(err, data) {
				if (err) {
					uni.showToast({

						title: err,
					});

				} else {
					that.PetList = data.data
					console.log('获取成功', that.PetList);
				}
			}, 'POST', {
				id: id,

			})
		},
		methods: {
			// 弹出层查询具体信息
			OpenPopup() {
				// 获取id
				const id = this.id
				// 获取名字
				const name = this.model1.userInfo.name
				// 获取类型
				const type = this.lei
				// 获取性别
				const sex = this.sex
				// 获取年龄
				const age = this.model1.userInfo.age
				// 获取主人信息
				const description = this.description
				// 获取体型
				const shape = this.tixing
				// 获取备注信息
				const remark = this.remark
				const that = this
				myRequest('pet/edit?server=1', function(err, data) {
					if (err) {
						uni.showToast({

							title: err,
						});

					} else {
						that.newlist = data.data
						console.log('获取成功', that.newlist);

					}
				}, 'POST', {
					id: id,
					name: name,
					type: type,
					sex: sex,
					age: age,
					description: description,
					image: '#',
					shape: shape,
					remark: remark

				})
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			back() {
				uni.navigateBack({
					delta: 1, // 返回1个，如果是2，返回2个页面
				});
			},

			// 用户宠物修改信息
			ModificationInformation() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form
					.validate()
					.then((res) => {
						uni.showToast({
							icon: "success",
							title: "校验通过",
						});
					})
					.catch((errors) => {
						uni.showToast({
							icon: "error",
							title: "校验失败",
						});
					});
				// 获取id
				const id = this.id
				// 获取名字
				const name = this.model1.userInfo.name
				// 获取类型
				const type = this.lei
				// 获取性别
				const sex = this.sex
				// 获取年龄
				const age = this.model1.userInfo.age
				// 获取主人信息
				const description = this.description
				// 获取体型
				const shape = this.tixing
				// 获取备注信息
				const remark = this.remark
				console.log(shape);
				myRequest('pet/update?server=1', function(err, data) {
					if (err) {
						uni.showToast({

							title: err,
						});

					} else {

						console.log('获取成功', data);
						// 返回上一页
						uni.navigateBack({
							delta: 1
						})
					}
				}, 'POST', {
					id: id,
					name: name,
					type: type,
					sex: sex,
					age: age,
					description: description,
					image: '#',
					shape: shape,
					remark: remark

				})
			},
			// 删除宠物
			reset(e) {

				const id = this.id
				console.log(id);
				myRequest('pet/delete?server=1', function(err, data) {
					if (err) {
						uni.showToast({

							title: err,
						});

					} else {

						console.log('获取成功', data);
					}
				}, 'POST', {
					id: id,
				})
				this.$refs.form.resetFields();
				this.$refs.form.clearValidate();
			},
			// 类型选择
			showSexSelect() {
				this.$refs.sexSelect.open();
				this.hideKeyboard();
			},
			// 类型选择返回结果
			sexSelect(e) {
				this.model1.userInfo.sex = e.name;
				// 对部分表单字段进行校验
				this.$refs.form.validateField("userInfo.sex", (err) => {
					// 处理错误后的逻辑
				});
			},
			hideKeyboard() {
				uni.hideKeyboard();
			},

			openPicker() {
				this.$refs.picker.open();
			},
			confirm(e) {
				console.log("confirm", e);
				this.sex = e.value[0];
			},
			openPickerr() {
				this.$refs.pickerr.open();
			},
			confirmm(e) {
				console.log("confirm", e);
				this.tixing = e.value[0];
			},
			on() {
				this.$refs.pic.open();
			},
			conm(e) {
				console.log("confirm", e);
				this.lei = e.value[0];
			},
		},
		computed: {
			customStyle() {
				return {
					width: "280rpx",
					height: "80rpx",
					background: "#d6f1ed",
					border: "1px solid #d6f1ed",
					color: "#008c8c",
					borderRadius: "40rpx", //圆角
					marginLeft: "40rpx",
				};
			},
			customStyle2() {
				return {
					width: "280rpx",
					height: "80rpx",
					background: "#008c8c",
					border: "1px solid #008c8c",
					color: "#fff",
					borderRadius: "40rpx", //圆角
					marginLeft: "60rpx",
				};
			},
		},
	};
</script>

<style lang="scss">
	@import url("chongwuxx.scss");
</style>